3. “... a lot of people within Google think that the web should be fast. It should be
a good experience, and so it’s sort of fair to say that if
you’re a fast
site, maybe you should get a little bit of a bonus. If you
really have an awfully slow site, then maybe users don’t want that as much.”
— Matt Cutts, Google
Thursday, March 25, 2010
4. 10s intolerable
Amazon Home Page (5.43s)
Google Results Page (942ms)
Google Home Page (745ms) 1s responsive
100ms instantaneous
Thursday, March 25, 2010
5. what slows
sites down?
(hint: it’s not the server)
Thursday, March 25, 2010
6. e top 10 websites spend less than
20% of total response time retrieving
the HTML document.
— “High Performance Web Sites”, Steve Souders
Thursday, March 25, 2010
8. load your resources
in the right order
http://www.flickr.com/photos/btsunami/1204911091/
Thursday, March 25, 2010
9. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Delivering a Responsive UI</title>
<link rel="stylesheet" href="css/html5reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery.blockui.js"></script>
<script src="js/jquery.cycle.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<ul id="banner">
<li class="news"><strong>News:</strong> Your website can be faster!</li>
</ul>
<div id="wrapper">
<section id="mainbar">
<section id="content">
<header>
<h1>Delivering a Responsive UI</h1>
</header>
<img src="img/speed.jpg" alt="http://www.flickr.com/photos/chavals/3045853162/">
<p class="intro">Your visitors deserve a fast site; thankfully, with just a little bit of
effort, you can provide a responsive experience. Here’s why you need to care:</p>
<ul>
<li>“… a lot of people within Google think that the web should be fast. It
should be a good experience, and so it’s sort of fair to say that <strong>if you’re a fast site, maybe
you should get a little bit of a bonus</strong>. If you really have an awfully slow site, then maybe users donâ
€™t want that as much.” &mdash Matt Cutts, Google</li>
<li>“… the iPhone browser was able to cache a maximum of <strong>19 external
Thursday, Marchcomponents</strong>.”</li>
25KB 25, 2010
11. your .htaccess file:
</p>
<pre>
RewriteCond %{REQUEST_URI} ^/v/[0-9.]+/
RewriteRule ^v/[0-9.]+/(.*) /$1
</pre>
<p>
Then, set the version number in a config file, and change it as needed; when the
version number changes, the browser will automatically fetch the resource, because it will see it as a resource
it has never seen before.
</p>
</article>
</section>
</section>
<section id="promos">
<article id="social">
<ul>
<a href="http://pinboard.in/u:rmurphey/t:responsive-ui/"><li class="pinboard">Pinboard</
li></a>
<a href="http://twitter.com/rmurphey"><li class="twitter">Twitter</li></a>
<a href="http://linkedin.com/rmurphey"><li class="linkedin">LinkedIn</li></a>
<a href="http://vimeo.com/yayquery"><li class="vimeo">Vimeo</li></a>
<a href="http://slideshare.net/rmurphey"><li class="slideshare">Slideshare</li></a>
<a href="http://flickr.com/photos/rdmey"><li class="flickr">Flickr</li></a>
</ul>
</article>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.blockui.js"></script>
<script src="js/jquery.cycle.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Thursday, March 25, 2010
14. combine & minify css
# combine css into one file
cat html5reset.css styles.css > tmp.css;
# run yui compressor over the combined file
java -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type css tmp.css >
prod.css;
# remove the tmp file you created
rm tmp.css;
combine & minify js
# combine all of the files that aren't likely to change into one file
cat jquery.js jquery.blockui.js jquery.cycle.js jquery.validate.js > tmp.js;
# run yui compressor over the combined file
sprites
java -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar tmp.js > prod.min.js;
# run yui compressor over your app file
java -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar app.js > app.min.js;
# remove the tmp file you created
rm tmp.js;
Thursday, March 25, 2010
18. # .htaccess
ExpiresActive On
ExpiresDefault "access plus 480 weeks"
ExpiresByType image/gif "access plus 5 hours"
Header set Cache-Control "max-age=290304000, public"
expiration &
cache control
Thursday, March 25, 2010
19. # .htaccess
RewriteCond %{REQUEST_URI} ^/v/[0-9.]+/
RewriteRule ^v/[0-9.]+/(.*) /$1
cachebusting via
URL versioning
http://www.rebeccamurphey.com/v/1234/responsive-ui/img/add.png
Thursday, March 25, 2010
21. append all at once
// BAD
for (var i=0; i<10; i++) {
$('body').append('<li>list item number ' + i + '</li>');
}
// BETTER
var $body = $('body');
for (var i=0; i<10; i++) {
$body.append('<li>list item number ' + i + '</li>');
}
// BEST
var html;
for (var i=0; i<10; i++) {
html += '<li>list item number ' + i + '</li>';
}
$('body').append(html);
Thursday, March 25, 2010
22. use good selectors & cache selections
// BAD
$('.foo').addClass('bar');
$('.foo').append('<p>hello world</p>');
$('.foo').css('color', 'red');
$('.foo').css('border', '1px solid blue');
// GOOD
// use a better selector, and cache the selection
var $foo = $('div.foo');
// test selection length if the element may not exist
if ($foo.length) {
$foo
.addClass('bar')
.append('<p>hello world</p>')
.css({
color : 'red',
border : '1px solid blue'
});
}
Thursday, March 25, 2010
23. optimize event binding
// this is fine ...
$('div.foo').bind('click', function(e) {
alert('clicked');
});
// ... but this is faster!
$('div.foo').bind('mousedown', function(e) {
alert('clicked');
});
Thursday, March 25, 2010
24. embrace modern
browser features,
over pixel perfection
Thursday, March 25, 2010
